<template>
  <div>
    <!-- 采购单列表 -->
    <el-row :gutter="20">
      <el-col :span="3">
        <el-form-item>
          <template slot="label">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                {{ getLabel(formKey)
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="item in commandOptions"
                  :key="item.value"
                  :command="item.value"
                  >{{ item.name }}</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <el-input
            v-model="form[formKey]"
            placeholder="多项输入，默认用逗号“，”分割"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="采购单状态">
          <el-select v-model="form.purchaseStatus" placeholder="请选择">
            <el-option v-for="(item, index) in statusOptions" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="预约状态">
          <el-select v-model="form.appointed" placeholder="请选择">
            <el-option label="未预约" :value="false"></el-option>
            <el-option label="已预约" :value="true"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="创建时间">
          <DatePicker keys="time1" @handleDateChange="handleDateChange"></DatePicker>
          </el-date-picker>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="期望到仓时间">
          <DatePicker keys="time2" @handleDateChange="handleDateChange"></DatePicker>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="收货时间">
          <DatePicker keys="time7" @handleDateChange="handleDateChange"></DatePicker>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="失效时间">
          <DatePicker keys="expirationDate" @handleDateChange="handleDateChange"></DatePicker>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item label="采购金额大于(元)">
          <el-input v-model="form.amountGranterThan" placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DatePicker from "./datePicker"
const form = () => {
    return {
        purchaseNo:"",
        appointmentNo:"",
        channelId:"",
        purchaseStatus:"",
        amountGranterThan:"",
        time1Start:"",
        time1End:"",
        time2Start:"",
        time2End:"",
        time7Start:"",
        time7End:"",
        expirationDateStart:"",
        expirationDateEnd:"",
      }
}
export default {
  components: {
    DatePicker
  },
  data() {
    return {
      form: form(),
      formKey: "purchaseNo",
      commandOptions: [
        { name: "采购单编号", value: "purchaseNo" },
        { name: "预约单号", value: "appointmentNo" },
        { name: "来源单号", value: "channelId" }
      ],
      statusOptions:[
        "供应商部分预约", "待财务总监审批", "待采购主管审批", "待采购总监审批", "供应商全部预约", "供应链总监审批", "库控小二审批", "待供应商确认", "供应商已确认", "超期关单", "待供应商预约", "待收货", "部分收获", "收货完成", "未发货已终止", "已过期作废", "已取消", "审批拒绝"
      ]
    };
  },
  methods: {
    handleDateChange(ranges){
      this.form = Object.assign(this.form, {...ranges})
    },
    handleCommand(command) {
      this.formKey = command;
    },
    getLabel(value) {
      const index = this.commandOptions.findIndex(item => item.value == value);
      if (index != -1) {
        return this.commandOptions[index].name;
      } else {
        return "";
      }
    },
    reset(){
        this.form = form()
    }
  }
};
</script>
